<script setup>
import myForm from '@/components/MyForm.vue'
import {saveApi} from "@/api/RoomApi";
import {updateApi} from "@/api/RoomApi";
import {shallowReactive, shallowRef} from "vue";
import {RULE} from "@/const";
import {useDark, useToggle} from "@vueuse/core";

// 抽屉 + 表单数据 + 表单规则
let items = shallowRef([
  {label: '房间名称', prop: 'title'},
  {label: '房间容量', prop: 'capacity', type: 'number'},
  {label: '房间地址', prop: 'address', type: 'textarea'},
  {label: '房间描述', prop: 'info', type: 'textarea'}
]);
let data = shallowReactive({
  'id':17,
  'title':'大物实验室',
  'capacity':31,
  'address':'实验楼',
  'info':'学物理'
});
let rule = {info: RULE.COMMON_INFO};

function updateSuccess() {
  alert('修改完成');
}

useToggle(useDark());
</script>

<template>
  <div style="margin: 50px 200px">
    <my-form type="update"
             :items="items"
             :data="data"
             :rules="rules"
             :api="updateApi"
             :fn="updateSuccess"/>
  </div>

</template>

<style scoped lang="scss">

</style>